
<template>
    <div class="card-header" style="margin-bottom:12px;">
        <span class="card-title">CPU</span>
        <a-select ref="select" v-model:value="form.duration" placeholder="请选择查询时间" class="card-opt" @change="selectTime">
            <a-select-option value="15">近15分钟</a-select-option>
            <a-select-option value="30">近30分钟</a-select-option>
            <a-select-option value="1440">近1天</a-select-option>
            <a-select-option value="4320">近3天</a-select-option>
        </a-select>
    </div>

    <div class="card-info-wrap">
        <span class="card-info">CPU核心数：<span class="num">{{ data?.cpuNum?.value || 0 }} </span></span>
        <span class="card-info">CPU使用率：<span class="num">{{ formatCpuUse() }} %</span></span>
    </div>

    <div class="card-content" style="height:256px;">
        <div id="charts" ref="charts" style="width:100%;height:100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import { getCpuListApi } from '@/api/modules/api.monitoring'
import dayjs from 'dayjs';

const props = defineProps({
    instanceId: {
        type: Object,
        default: {}
    }
});

const form = ref({
    duration: '15'
})
// 初始化表格
let myChart = null
const charts = ref()
function init() {
    myChart = echarts.init(charts.value);
    let option = {
        color: ['#FAAD14'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: 0,
            containLabel: true
        },

        xAxis: [
            {
                type: 'category',
                data: data.value?.cpuUse?.map(item => item.totalTime),
                axisLabel: {
                    formatter: (val) => {
                        return dayjs(val).format('HH:mm');
                    },
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: (val) => {
                        return val + '%';
                    },
                },
            }
        ],
        series: [
            {
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(250, 173, 20, 0.18)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(250, 173, 20, 0.00)'
                        }
                    ])
                },
                data: data.value?.cpuUse?.map(item => (item.value)?.toFixed(2))
            },

        ]
    };

    option && myChart.setOption(option);
}

/**
 * 页面初始化
 */
onMounted(async () => {
    await getCpuList()
    init()
});

const data = ref({

})

const getCpuList = async () => {
    const params = {
        instanceId: props.instanceId,
        ...form.value
    }
    const res = await getCpuListApi(params)
    if (res.code != 0) {
        return
    }

    data.value = res.data.data

}

const selectTime = async () => {
    await getCpuList()
    init()
}

const formatCpuUse = () => {
    if (!data.value?.cpuUse?.length) {
        return 0
    }

    const length = data.value?.cpuUse?.length
    const str = data.value?.cpuUse[length - 1]

    return (str.value).toFixed(2) || 0
}

</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .card-title {
        font-weight: 550;
        color: #223354;
        margin-right: 20px;
    }

    .card-opt {
        margin-left: auto;
    }
}

.card-info-wrap {
    .card-info {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 40px;
    }

    .num {
        color: #3F73F6;
        font-family: PingFang SC;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
}

.card-content {
    display: flex;
}
</style>
